.neo-toast {
    align-items     : center;
    background-color: var(--toast-background-color);
    border-radius   : 0.5rem;
    box-shadow      : 0 0.25rem 0.5rem var(--toast-shadow-color);
    color           : var(--toast-color);
    display         : flex;
    transition      : bottom .3s ease-out, top .3s ease-out;

    .neo-toast-inner {
        align-items: center;
        display    : flex;

        &.neo-toast-has-title {
            .neo-toast-text {
                text-align: left;
            }
        }

        & > div {
            padding: 0.25em 0.5em;
        }

        .neo-toast-icon {
            border-right: 2px solid var(--toast-color);
            flex        : 1;
            font-size   : 1.5em;
        }

        .neo-toast-text {
            padding   : 0.25em 1em;
            text-align: center;

            .neo-toast-msg {
                font-size: 0.8em;
            }

            .neo-toast-title {
                padding-bottom: 0.2em;
                text-transform: uppercase;
            }
        }

        .neo-toast-close {
            background : transparent;
            border     : 0;
            color      : inherit;
            cursor     : pointer;
            font-size  : 1.5rem;
            line-height: 1.5;
            margin-left: auto;
        }
    }
}

// ui: danger
.neo-toast-danger {
    background-color: var(--toast-danger-background-color);
    color: var(--toast-danger-color);

    & > div {

        .neo-toast-inner {

            .neo-toast-icon {
                border-right: 2px solid var(--toast-danger-color);
            }
        }
    }
}

// ui: success
.neo-toast-success {
    background-color: var(--toast-success-background-color);
    color: var(--toast-success-color);

    & > div {

        .neo-toast-inner {

            .neo-toast-icon {
                border-right: 2px solid var(--toast-success-color);
            }
        }
    }
}

/* Toast positions */
.neo-toast-tr {
    right: 1rem;
    left : auto;
    top  : 1rem;
}

.neo-toast-tc {
    left     : 50%;
    top      : 1rem;
    transform: translateX(-50%);
}

.neo-toast-tl {
    left: 1rem;
    top : 1rem;
}

.neo-toast-br {
    bottom: 1rem;
    right : 1rem;
    left  : auto;
}

.neo-toast-bc {
    bottom   : 1rem;
    left     : 50%;
    transform: translateX(-50%);
}

.neo-toast-bl {
    bottom: 1rem;
    left  : 1rem;
}

/* Toast slide-in animation */
@keyframes neo-toast-slide-down-in {
    from {
        transform: translateY(-150%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes neo-toast-slide-up-in {
    from {
        transform: translateY(150%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes neo-toast-slide-left-in {
    from {
        transform: translateX(-150%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes neo-toast-slide-right-in {
    from {
        transform: translateX(150%);
    }
    to {
        transform: translateX(0);
    }
}

/* Add the slide-in animation to the toast when the slide-in class is added */
.neo-toast-slide-down-in {
    animation: neo-toast-slide-down-in 0.25s ease-out;
}

.neo-toast-slide-up-in {
    animation: neo-toast-slide-up-in 0.25s ease-out;
}

.neo-toast-slide-left-in {
    animation: neo-toast-slide-left-in 0.25s ease-out;
}

.neo-toast-slide-right-in {
    animation: neo-toast-slide-right-in 0.25s ease-out;
}

/* Toast fade-out animation */
@keyframes neo-toast-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Add the fade-out animation to the toast when the fade-out class is added */
.neo-toast-fade-out {
    animation          : neo-toast-fade-out 0.25s ease-out;
    animation-fill-mode: forwards;
}
